<template>
	<view class="pd-20" style="display: flex;flex-direction: column;height: 100%;">
		<uni-list v-if="dataList.length" style="margin-bottom: 20rpx;">
			<!-- <u-checkbox-group v-model="checkData" placement="column" @change="changeGroup"> -->
			<view class="display_row_btn_center" style="flex:1;" v-for="(item, index) in dataList" :key="index">
				<!-- <u-checkbox activeColor="red" shape="circle" iconSize="18px" size="24px" :name="item.id">
					</u-checkbox> -->
				<view style="flex: 1;margin-bottom: 20rpx;border-radius: 20rpx;"
					:class="{active:checkData.indexOf(item.id)>-1}">
					<keyword-item :data="item" :canGoNext="false" @click.native.stop="changeGroup(item.id)">
					</keyword-item>
				</view>
			</view>
			<!-- </u-checkbox-group> -->
		</uni-list>
		<u-empty mode="list" v-else :customStyle="{flex:'1'}"></u-empty>

		<view class="btmBox c_ffffff" @click="$u.throttle(doSub, 3000)">
			确认
		</view>
	</view>
</template>

<script>
	import {
		getKeyWords1,
		receiveKeywords
	} from '@/config/api.js'

	export default {
		name: "back-keyword",
		props: {
			missionId: {
				type: String,
				default: ""
			}
		},
		options: {
			styleIsolation: 'shared'
		},
		data() {
			return {
				dataList: [],
				page: 1,
				pages: 1,
				checkData: []
			}
		},
		mounted() {
			var that = this;
			uni.$on('onReachBottom', function(e) { //接收参数
				that.listScrollTolower();
			});
		},
		created() {
			this.getList();
		},
		methods: {
			changeGroup(e) {
				var index = this.checkData.indexOf(e);
				if (index == -1) {
					this.checkData.push(e)
				} else {
					this.checkData.splice(index,1)
				}
			},
			doSub() {
				if (this.checkData.length <= 0) {
					uni.showToast({
						title: '请选择关键词！',
						icon: 'error',
						duration: 2000
					})
					return;
				}

				receiveKeywords({
					missionId: this.missionId,
					keyword_ids: JSON.stringify(this.checkData)
				}).then(res => {
					this.dataList = [];
					this.page = 1;
					this.pages = 1;
					this.getList();
					uni.showToast({
						title: "操作成功",
						icon: 'success',
						duration: 2000
					})

				}).catch(err => {

				})
			},
			listScrollTolower() {
				if (this.page <= this.pages) {
					this.getList();
				}
			},
			getList() {
				getKeyWords1({
					mission_id: this.missionId,
					status: 2,
					from: 2,
					user_id: 0,
					page: this.page
				}).then(res => {
					this.dataList = this.dataList.concat(res.list);
					this.pages = res.page.pages;
					this.page++;
				}).catch(err => {

				})
			}
		}
	}
</script>

<style scoped>
	.active {
		border: 1px solid red;
	}

	/deep/ keyword-item>.itemBox {
		margin-top: 0 !important;
	}
</style>
